<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="/aaa/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/aaa/layuiadmin/style/admin.css" media="all">
    <script src="/aaa/layuiadmin/layui/layui.js"></script>
    <script src="/aaa/echarts/echarts.js"></script>

</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">

                <div class="layui-inline">
                    <label class="layui-form-label">年份</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="test3" ><!--placeholder="yyyy"-->
                    </div>
                </div>

            </div>
        </div>

        <div class="layui-card-body">
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="expenditureFinance" style="width: 600px;height:500px;display: inline-block;"></div>
            <div id="incomeTypeFinance" style="width: 500px;height:500px;display: inline-block;"></div>
            <div id="expendTypeFinance" style="width: 450px;height:500px;display: inline-block;"></div>
        </div>
    </div>
</div>

<script type="text/javascript">

    layui.use(['layer', 'laydate', 'form', 'element', 'table', 'laytpl', 'jquery'], function () {
        var layer = layui.layer,
            laydate = layui.laydate,
            table = layui.table;
        var $ = layui.$;

        /*打开页面即加载 收入/支出 */
        $.post({
            url: '/aaa/finance/getFinanceInAndOut'
        }, function (data) {
            var arrayPro1 = new Array();
            var arrayCou1 = new Array();
            var arrayOut1 = new Array();
            var arraymon1 = new Array();

            for (var i = 0; i < data.length; i++) {
                var mon = data[i].months;
                arrayPro1.push(mon + "月");

                var countCost = data[i].info;
                arrayCou1.push(countCost);

                var countExpend = data[i].expend;
                arrayOut1.push(countExpend);

                var countMon = data[i].mon;
                arraymon1.push(countMon);
            }

            // 填入数据
            expenditureMyChart.setOption({
                series: [{
                    // 根据名字对应到相应的系列
                    name: '收入',
                    data: arrayCou1
                },
                    {
                        // 根据名字对应到相应的系列
                        name: '支出',
                        data: arrayOut1
                    },
                    {
                        // 根据名字对应到相应的系列
                        name: '收益',
                        data: arraymon1
                    }
                ]
            });
        });

        /*收入来源*/
        $.post({
            url: '/aaa/finance/getFinanceInFrom'
        }, function (data) {
            var arrayPro2 = new Array();

            for (var i = 0; i < data.length; i++) {
                var names = data[i].name;
                arrayPro2.push(names);
            }

            // 填入数据
            incomeTypeMyChart.setOption({
                legend: {
                    data: arrayPro2
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '收入来源',
                    data: data
                }]
            });
        });

        /*月支出*/
        $.post({
            url: '/aaa/finance/getFinanceOutFrom',
        }, function (data) {
            var arrayPro3 = new Array();
            var arrayCou31 = new Array();
            var arrayCou32 = new Array();
            var arrayCou33 = new Array();
            var len=(data.length)/3;
            for (var i = 0; i <len ; i++) {
                var mon = data[i].months;
                arrayPro3.push(mon + "月");//月份

                var countCost1 = data[i].total;
                arrayCou31.push(countCost1);//电动车

                var countCost2 = data[i+(len*1)].total;
                arrayCou32.push(countCost2);//零件

                var countCost3 = data[i+(len*2)].total;
                arrayCou33.push(countCost3);//电动车零件

            }
            // 填入数据
            expendTypeMyChart.setOption({
                xAxis: {
                    data: arrayPro3
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '电瓶车',
                    data: arrayCou31
                },
                    {
                        // 根据名字对应到相应的系列
                        name: '配件',
                        data: arrayCou32
                    },
                    {
                        // 根据名字对应到相应的系列
                        name: '电瓶车零件',
                        data: arrayCou33
                    }]
            });
        });

        /*年选择器*/
        laydate.render({
            elem: '#test3'
            , type: 'year'
            , done: function (value, date) {//选中后的回调

                $.post({
                    url: '/aaa/finance/getFinanceInAndOut',
                    data:{
                        years:value
                    }
                }, function (data) {
                    var arrayPro1 = new Array();
                    var arrayCou1 = new Array();
                    var arrayOut1 = new Array();
                    var arraymon1 = new Array();

                    for (var i = 0; i < data.length; i++) {
                        var mon = data[i].months;
                        arrayPro1.push(mon + "月");

                        var countCost = data[i].info;
                        arrayCou1.push(countCost);

                        var countExpend = data[i].expend;
                        arrayOut1.push(countExpend);

                        var countMon = data[i].mon;
                        arraymon1.push(countMon);
                    }

                    // 填入数据
                    expenditureMyChart.setOption({
                        xAxis: {
                            data: arrayPro1
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '收入',
                            data: arrayCou1
                        },
                        {
                                // 根据名字对应到相应的系列
                                name: '支出',
                                data: arrayOut1
                        },
                        {
                                // 根据名字对应到相应的系列
                                name: '收益',
                                data: arraymon1
                        }
                        ]
                    });
                });


                /*收入来源*/
                $.post({
                    url: '/aaa/finance/getFinanceInFrom',
                    data:{
                        years:value
                    }
                }, function (data) {
                    var arrayPro2 = new Array();

                    for (var i = 0; i < data.length; i++) {
                        var names = data[i].name;
                        arrayPro2.push(names);
                    }

                    // 填入数据
                    incomeTypeMyChart.setOption({
                        legend: {
                            data: arrayPro2
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '收入来源',
                            data: data
                        }]
                    });
                });

                /*月支出*/
                $.post({
                    url: '/aaa/finance/getFinanceOutFrom',
                    data:{
                        years:value
                    }
                }, function (data) {
                    var arrayPro3 = new Array();
                    var arrayCou31 = new Array();
                    var arrayCou32 = new Array();
                    var arrayCou33 = new Array();
                    var len=(data.length)/3;
                    for (var i = 0; i <len ; i++) {
                        var mon = data[i].months;
                        arrayPro3.push(mon + "月");//月份

                        var countCost1 = data[i].total;
                        arrayCou31.push(countCost1);//电动车

                        var countCost2 = data[i+(len*1)].total;
                        arrayCou32.push(countCost2);//零件

                        var countCost3 = data[i+(len*2)].total;
                        arrayCou33.push(countCost3);//电动车零件

                    }
                    // 填入数据
                    expendTypeMyChart.setOption({
                        xAxis: {
                            data: arrayPro3
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '电瓶车',
                            data: arrayCou31
                        },
                            {
                                // 根据名字对应到相应的系列
                                name: '配件',
                                data: arrayCou32
                            },
                            {
                                // 根据名字对应到相应的系列
                                name: '电瓶车零件',
                                data: arrayCou33
                            }]
                    });
                });


            }
        });


        // 基于准备好的dom，初始化echarts实例
        var expenditureMyChart = echarts.init(document.getElementById('expenditureFinance'));
        var incomeTypeMyChart = echarts.init(document.getElementById('incomeTypeFinance'));
        var expendTypeMyChart = echarts.init(document.getElementById('expendTypeFinance'));

        // 指定图表的配置项和数据
        var expenditureOption = {
            title: {
                text: '收入/支出'
            },
            toolbox: { //可视化的工具箱
                show: true,
                feature: {
                    saveAsImage: {//保存图片
                        show: true
                    },
                    magicType: {//动态类型切换
                        type: ['bar', 'line']
                    }
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            legend: {
                data: ['收入', '支出']
            },
            xAxis: {
                type: 'category',
                data: [],
                axisPointer: {
                    type: 'shadow'
                }
            },
            yAxis: [
                {
                    type: 'value',
                    name: '收支',
                    axisLabel: {
                        formatter: '{value}'
                    }
                },
                {
                    type: 'value',
                    name: '收益',
                    axisLabel: {
                        formatter: '{value}'
                    }
                }
            ],
            series: [
                {
                    name: '收入',
                    type: 'bar',
                    data: []
                },
                {
                    name: '支出',
                    type: 'bar',
                    data: []
                },
                {
                    name:'收益',
                    type:'line',
                    yAxisIndex: 1,
                    data:[]
                }
            ]
        };

        var incomeTypeOption = {
            title: {
                text: '收入来源',
                x:'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data:[]
            },
            series: [
                {
                    name:'收入来源',
                    type:'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[]
                }
            ]
        };

        var expendTypeOption = {
            title: {
                text: '月支出'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['电瓶车','配件','电瓶车零件']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'电瓶车',
                    type:'line',
                    stack: '月支出',
                    data:[]
                },
                {
                    name:'配件',
                    type:'line',
                    stack: '月支出',
                    data:[]
                },
                {
                    name:'电瓶车零件',
                    type:'line',
                    stack: '月支出',
                    data:[]
                }]
        };



        // 使用刚指定的配置项和数据显示图表。
        expenditureMyChart.setOption(expenditureOption);
        incomeTypeMyChart.setOption(incomeTypeOption);
        expendTypeMyChart.setOption(expendTypeOption);
    });
</script>
</body>
</html>